<template>
  <div>
    <h1>我是App组件</h1>
    <input type="text" ref="oIpt">
    <button @click="getMsg">获取input</button>
    <Count />
  </div>
</template>

<script>
import Count from "./components/Count.vue";
export default {
  name: "App",
  components: { Count },
  methods:{
    /* 
      点击按钮获取输入框的两种方法：
       — 1.v-model数据双向绑定，然后直接获取数据即可
       — 2.利用ref可以获取表单元素
           * 给表单设置ref属性,值为一个字符串名称
           * 在组件实例化对象上有一个$refs属性，即可获取表单元素    
    */
    getMsg(){
      console.log(this.$refs.oIpt.value);
    }
  }
};
</script>

<style>
</style>